<template>
  <view>
    <view class="title">{{ n.name }}</view>
    <view class="content">
      <rich-text :nodes="n.addr"></rich-text>
      <button class="delete-button" @click="deleteData(n.id)">删除</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      n: {}
    };
  },
  onLoad(e) {
    console.log(e);
    this.getData(e.id);
  },
  methods: {
    getData(newId) {
      var self = this;
      uni.request({
        url: 'http://localhost:6868/api/video/' + newId,
        success(response) {
          // 这里使用 self
          self.n = response.data[0];
        }
      });
    },
    deleteData(id) {
      uni.request({
        url: `http://localhost:6868/api/video/delete/${id}`,
        method: 'DELETE',
        success: (response) => {
          console.log('数据删除成功', response.data);

          // 从视频列表中移除被删除的视频
          this.videos = this.videos.filter((video) => video.id !== id);
        },
        fail: (error) => {
          console.error('数据删除失败', error);
          // 处理删除失败的情况
        }
      });
    }
  }
};
</script>

<style>
.title {
  line-height: 2em;
  font-weight: 700;
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.content {
  margin-bottom: 20px;
}

.delete-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 40px;
  background-color: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.delete-button:hover {
  background-color: #d9363e;
}

.delete-button:focus {
  outline: none;
}
</style>
